import NavBar from "../components/commons/navbar/NavBar.tsx";
import HomeContainer from "../components/home/HomeContainer.tsx";

import '../styles/modules/home.css'
import Footer from "../components/commons/Footer.tsx";
import ChatWindow from "../components/home/chat/ChatWindow.tsx";
import FAB from "../components/commons/FAB.tsx";
import {useEffect, useState} from "react";
import {Article} from "../model/Article.ts";
import {baseUrl} from "../settings/Settings.ts";

const HomePage = () => {

    const [isShown, setIsShown] = useState(false);

    const handleClick = () => {
        console.log("handle click")
        setIsShown(current => !current);
    }

    const [articles, setArticles] = useState<Article[]>([])


    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(baseUrl + '/api/articles/info');
                const jsonData = await response.json();
                setArticles(jsonData); // Update the state with the fetched data
                console.log(jsonData)

            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);


    return (
        <>
            <NavBar/>
            {!isShown && <FAB clickHandler={handleClick} img={"m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9 9 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.4 10.4 0 0 1-.524 2.318l-.003.011a11 11 0 0 1-.244.637c-.079.186.074.394.273.362a22 22 0 0 0 .693-.125m.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6-3.004 6-7 6a8 8 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a11 11 0 0 0 .398-2"}/>}
            {isShown && <ChatWindow clickHandler={handleClick}/>}
            <main className={"overflow-y-scroll"}>


                <HomeContainer articles={articles} />


            <Footer/>
            </main>
        </>
    )
}

export default HomePage